<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	div{
		width: 500px;
		margin: 10px auto;
		text-align: center;
	}
	ul{
	overflow: hidden;
	list-style: none;
	}
	ul li{
		width: 100px;
		height: 100px;
		background-image: url("./image/star-off.png");
		float: left;
	}
 li.special{
		background-image: url("./image/star3-on.jpg");
	}
</style>	
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<!-- <li class="special"></li> -->
<li class="special"></li>
<li></li>
<li></li>
</ul>
<p>您的评分为：<span>0</span> 颗星</p>
</div>
<script>
	//点谁亮谁
	var lis=document.getElementsByTagName('li');
	//添加点击事件
	// for(let li of lis){
		
	// 	// li.onclick=function(){
	// 	// 	// console(lis);
	// 	// 	this.classList.toggle('special');
	// 	}
	// }
	
	for(let index in lis){
		lis[index].onclick=function(){
			
			
			for(let i=0;i<=index;i++){
				lis[i].classList.add("special");
				
			}
		}
	}

	

</script>
</body>
</html>
